<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="mapwrap">
      <dv-border-box-12>
        <div class="content-container">
          <!-- 左侧地图区域 -->
          <div class="map-container">
            <!-- 将标题移到地图容器内部 -->
            <div class="map-title">
              <div class="zuo"></div>
              <span class="titletext">新生分布图</span>
              <div class="you"></div>
            </div>
            <div class="map-content">
              <Echart id="CenterMap" :options="options" ref="CenterMap" />
            </div>
          </div>

          <!-- 右侧图表区域 -->
          <div class="charts-container">
            <!-- 男女比例图表 -->
            <div class="chart-item">
              <div class="chart-title">已报到男女比例</div>
              <Echart id="GenderChart" :options="genderOptions" height="100%" />
            </div>

            <!-- 民族构成图表 -->
            <div class="chart-item">
              <div class="chart-title" style="margin-bottom: 2px">
                已报到民族构成
              </div>
              <Echart id="EthnicChart" :options="ethnicOptions" height="100%" />
            </div>

            <!-- 校区报到率图表 -->
            <div class="chart-item">
              <div class="chart-title">校区报到情况</div>
              <Echart
                id="HighScoreChart"
                :options="highScoreOptions"
                height="100%"
              />
            </div>
          </div>
        </div>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
  import { currentGET } from "api/modules";
  import * as echarts from "echarts";
  import { GETNOBASE } from "api";

  export default {
    props: {
      allStudentsData: {
        type: Object,
        default: () => ({}),
      },
      reportedStudentsData: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        options: {},
        code: "china", // 固定为中国地图
        echartBindClick: false,
        isSouthChinaSea: false, // 是否要展示南海群岛
        // 图表数据
        genderOptions: {},
        ethnicOptions: {},
        highScoreOptions: {},
        // 地图数据
        mapData: [],
        // 添加标记来防止无限循环
        isProcessingReportedData: false,
        isProcessingAllData: false,
      };
    },
    watch: {
      allStudentsData: {
        handler(newData, oldData) {
          // 防止无限循环和重复处理
          if (this.isProcessingAllData || this.isSameData(newData, oldData)) {
            return;
          }

          if (newData && Object.keys(newData).length > 0) {
            this.isProcessingAllData = true;
            this.$nextTick(() => {
              this.processAllStudentsData();
              this.isProcessingAllData = false;
            });
          }
        },
        immediate: true,
        deep: true,
      },
      reportedStudentsData: {
        handler(newData, oldData) {
          // 防止无限循环和重复处理
          if (
            this.isProcessingReportedData ||
            this.isSameData(newData, oldData)
          ) {
            return;
          }

          if (newData && Object.keys(newData).length > 0) {
            this.isProcessingReportedData = true;
            this.$nextTick(() => {
              this.processReportedStudentsData();
              this.isProcessingReportedData = false;
            });
          }
        },
        immediate: true,
        deep: true,
      },
    },
    created() {
      // 移除这里的调用，因为 watcher 会处理
      // this.processAllStudentsData();
      // this.processReportedStudentsData();
    },

    mounted() {
      this.initMapWithLocalData();
      this.initGenderChart();
      this.initEthnicChart();
      this.initHighScoreChart();
    },

    methods: {
      // 添加数据比较方法来避免不必要的更新
      isSameData(newData, oldData) {
        if (!newData && !oldData) return true;
        if (!newData || !oldData) return false;

        try {
          return JSON.stringify(newData) === JSON.stringify(oldData);
        } catch (e) {
          return false;
        }
      },

      // 处理传入的学生数据（用于新生分布地图）
      processAllStudentsData() {
        console.log("CenterMap接收到的学生数据:", this.allStudentsData);

        // 处理地图数据
        if (
          this.allStudentsData &&
          this.allStudentsData.geographic_distribution &&
          this.allStudentsData.geographic_distribution.provinces &&
          Array.isArray(this.allStudentsData.geographic_distribution.provinces)
        ) {
          console.log(
            "CenterMap处理地理分布数据:",
            this.allStudentsData.geographic_distribution
          );

          // 解析地理分布数据
          const newMapData =
            this.allStudentsData.geographic_distribution.provinces.map(
              (item) => ({
                name: item.province_name,
                value: item.count,
                percentage: item.percentage,
                province_code: item.province_code,
              })
            );

          // 只有数据真正改变时才更新
          if (JSON.stringify(newMapData) !== JSON.stringify(this.mapData)) {
            this.mapData = newMapData;
            console.log("CenterMap处理后的地图数据:", this.mapData);
            this.initMapWithLocalData();
          }
        } else {
          console.log("CenterMap暂无地理分布数据，使用默认数据");
          if (this.mapData.length === 0) {
            this.mapData = this.getDefaultMapData();
            this.initMapWithLocalData();
          }
        }
      },

      // 处理报到统计数据（用于已报到的相关图表）
      processReportedStudentsData() {
        console.log(
          "CenterMap接收到的报到统计数据:",
          this.reportedStudentsData
        );

        if (
          !this.reportedStudentsData ||
          Object.keys(this.reportedStudentsData).length === 0
        ) {
          console.log("暂无报到统计数据，使用默认图表数据");
          return;
        }

        // 使用 $nextTick 确保 DOM 更新完成后再处理图表
        this.$nextTick(() => {
          // 更新已报到性别比例图表
          if (
            this.reportedStudentsData.genderStats &&
            typeof this.reportedStudentsData.genderStats === "object"
          ) {
            console.log(
              "已报到性别数据:",
              this.reportedStudentsData.genderStats
            );

            const maleData = this.reportedStudentsData.genderStats["男"] || {
              enrolledStudents: 0,
              totalStudents: 0,
            };
            const femaleData = this.reportedStudentsData.genderStats["女"] || {
              enrolledStudents: 0,
              totalStudents: 0,
            };

            console.log(
              "男性已报到:",
              maleData.enrolledStudents,
              "女性已报到:",
              femaleData.enrolledStudents
            );
            this.updateGenderChart(
              maleData.enrolledStudents,
              femaleData.enrolledStudents
            );
          }

          // 更新已报到民族构成图表
          if (
            this.reportedStudentsData.ethnicGroupStats &&
            typeof this.reportedStudentsData.ethnicGroupStats === "object"
          ) {
            console.log(
              "已报到民族数据:",
              this.reportedStudentsData.ethnicGroupStats
            );

            // 将对象转换为数组格式并过滤出已报到人数大于0的民族，并取前6个
            const ethnicArray = Object.entries(
              this.reportedStudentsData.ethnicGroupStats
            ).map(([key, value]) => ({
              ethnicGroupName: value.ethnicGroupName || key,
              enrolledStudents: value.enrolledStudents || 0,
              totalStudents: value.totalStudents || 0,
            }));

            const reportedNationData = ethnicArray
              .filter((item) => item.enrolledStudents > 0)
              .slice(0, 6);

            // 如果没有已报到的民族数据，取总数前6的民族但enrolledStudents为0
            const ethnicDataToShow =
              reportedNationData.length > 0
                ? reportedNationData
                : ethnicArray
                    .sort((a, b) => b.totalStudents - a.totalStudents)
                    .slice(0, 6);

            this.updateEthnicChart(ethnicDataToShow);
          }

          // 更新校区报到情况图表
          if (
            this.reportedStudentsData.campusStats &&
            typeof this.reportedStudentsData.campusStats === "object"
          ) {
            console.log("校区报到数据:", this.reportedStudentsData.campusStats);

            // 将对象转换为数组格式
            const campusArray = Object.entries(
              this.reportedStudentsData.campusStats
            ).map(([key, value]) => ({
              campus: value.campusName || key,
              enrolled: value.enrolledCount || 0,
              total: value.totalCount || 0,
            }));

            this.updateHighScoreChart(campusArray);
          }
        });
      },

      // 获取默认地图数据（用于没有数据时的展示）
      getDefaultMapData() {
        return [
          { name: "陕西省", value: 0, percentage: "0%" },
          { name: "河南省", value: 0, percentage: "0%" },
          { name: "安徽省", value: 0, percentage: "0%" },
          { name: "山东省", value: 0, percentage: "0%" },
          { name: "河北省", value: 0, percentage: "0%" },
        ];
      },

      // 初始化地图使用本地数据
      async initMapWithLocalData() {
        if (this.mapData.length === 0) {
          console.log("没有地图数据，跳过地图渲染");
          return;
        }

        await this.getGeojson("china", this.mapData);
      },

      /**
       * @description: 获取geojson并渲染地图
       * @param {*} name china 表示中国
       * @param {*} mydata 地图数据
       * @return {*}
       */
      async getGeojson(name, mydata) {
        this.code = name;
        // 如果要展示南海群岛并且展示的是中国的话
        let geoname = name;
        if (this.isSouthChinaSea && name == "china") {
          geoname = "chinaNanhai";
        }

        // 如果有注册地图的话就不用再注册了
        let mapjson = echarts.getMap(name);
        if (mapjson) {
          mapjson = mapjson.geoJSON;
        } else {
          try {
            mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`);
            echarts.registerMap(name, mapjson);
          } catch (error) {
            console.error("加载地图数据失败:", error);
            return;
          }
        }

        let cityCenter = {};
        let arr = mapjson.features;
        // 根据geojson获取省份中心点
        arr.map((item) => {
          cityCenter[item.properties.name] =
            item.properties.centroid || item.properties.center;
        });

        let newData = [];
        mydata.map((item) => {
          if (cityCenter[item.name]) {
            const value = item.value || 0;
            newData.push({
              name: item.name,
              value: cityCenter[item.name].concat(item.value),
            });
          }
        });

        this.init(name, mydata, newData);
      },

      init(name, data, data2) {
        let top = 35;
        let zoom = 1;
        let option = {
          backgroundColor: "rgba(0,0,0,0)",
          tooltip: {
            show: false,
          },
          legend: {
            show: false,
          },
          visualMap: {
            left: 5,
            bottom: 15,
            pieces: [
              { gte: 1000, label: ">1000人" },
              { gte: 500, lte: 999, label: "500-999人" },
              { gte: 200, lte: 499, label: "200-499人" },
              { gte: 100, lte: 199, label: "100-199人" },
              { gte: 50, lte: 99, label: "50-99人" },
              { lte: 49, label: "1-49人" },
            ],
            inRange: {
              // 渐变颜色，从小到大 - 数值越大颜色越深
              color: [
                "#c3d7df", // 最浅色 - 对应最小值范围
                "#8abcd1",
                "#66a9c9",
                "#4a9bc1",
                "#2f90b9",
                "#1781b5", // 最深色 - 对应最大值范围
              ],
            },
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          geo: {
            map: name,
            roam: false,
            selectedMode: false,
            zoom: zoom,
            top: top,
            show: false,
          },
          series: [
            {
              name: "MAP",
              type: "map",
              map: name,
              data: data,
              selectedMode: false,
              zoom: zoom,
              geoIndex: 1,
              top: top,
              tooltip: {
                show: true,
                formatter: function (params) {
                  if (params.data) {
                    // 查找对应的百分比数据
                    const matchData = data.find(
                      (item) => item.name === params.name
                    );
                    const value = params.data["value"] || 0;
                    const percentage = matchData ? matchData.percentage : "";
                    return (
                      params.name +
                      "：" +
                      value +
                      "人" +
                      (percentage ? " (" + percentage + ")" : "")
                    );
                  } else {
                    return params.name;
                  }
                },
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                  color: "#FFF",
                },
              },
              label: {
                show: false,
                color: "#000",
                formatter: function (val) {
                  if (val.data !== undefined) {
                    return val.name.slice(0, 2);
                  } else {
                    return "";
                  }
                },
                rich: {},
              },
              emphasis: {
                label: {
                  show: false,
                },
                itemStyle: {
                  areaColor: "#389BB7",
                  borderWidth: 1,
                },
              },
              itemStyle: {
                borderColor: "rgba(147, 235, 248, .8)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowColor: "rgba(128, 217, 248, .3)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
            },
            {
              data: data2,
              type: "effectScatter",
              coordinateSystem: "geo",
              symbolSize: function (val) {
                return 2;
              },
              legendHoverLink: true,
              showEffectOn: "render",
              rippleEffect: {
                scale: 4,
                color: "rgba(255,255,255, 1)",
                brushType: "fill",
              },
              tooltip: {
                show: true,
                formatter: function (params) {
                  if (params.data) {
                    // 查找对应的百分比数据
                    const matchData = data.find(
                      (item) => item.name === params.name
                    );
                    const value = (params.data["value"] && params.data["value"][2]) || 0;
                    const percentage = matchData ? matchData.percentage : "";
                    return (
                      params.name +
                      "：" +
                      value +
                      "人" +
                      (percentage ? " (" + percentage + ")" : "")
                    );
                  } else {
                    return params.name;
                  }
                },
                backgroundColor: "rgba(0,0,0,.6)",
                borderColor: "rgba(147, 235, 248, .8)",
                textStyle: {
                  color: "#FFF",
                },
              },
              label: {
                formatter: (param) => {
                  return param.name.slice(0, 2);
                },
                fontSize: 9,
                offset: [0, 2],
                position: "bottom",
                textBorderColor: "#fff",
                textShadowColor: "#000",
                textShadowBlur: 10,
                textBorderWidth: 0,
                color: "#FFF",
                show: true,
              },
              itemStyle: {
                color: "rgba(255,255,255,1)",
                borderColor: "rgba(2255,255,255,2)",
                borderWidth: 2,
                shadowColor: "#000",
                shadowBlur: 10,
              },
            },
          ],
        };
        this.options = option;
      },

      // 更新已报到男女比例图表
      updateGenderChart(maleRegistered, femaleRegistered) {
        const totalRegistered = maleRegistered + femaleRegistered;

        // 如果没有任何报到数据，显示暂无数据的图表
        if (totalRegistered === 0) {
          const option = {
            backgroundColor: "transparent",
            title: {
              text: "暂无报到数据",
              left: "center",
              top: "middle",
              textStyle: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 14,
              },
            },
            series: [
              {
                name: "男女比例",
                type: "pie",
                radius: ["25%", "55%"],
                center: ["50%", "40%"],
                data: [
                  {
                    value: 1,
                    name: "暂无数据",
                    itemStyle: { color: "#666666" },
                  },
                ],
                label: { show: false },
                tooltip: { show: false },
              },
            ],
          };
          this.genderOptions = option;
          return;
        }

        const malePercent = ((maleRegistered / totalRegistered) * 100).toFixed(
          1
        );
        const femalePercent = (
          (femaleRegistered / totalRegistered) *
          100
        ).toFixed(1);

        const option = {
          backgroundColor: "transparent",
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c}人 ({d}%)",
            backgroundColor: "rgba(0,0,0,0.8)",
            borderColor: "rgba(147, 235, 248, .8)",
            textStyle: { color: "#FFF" },
          },
          legend: {
            orient: "horizontal",
            bottom: "5%",
            textStyle: { color: "#fff", fontSize: 10 },
            itemWidth: 10,
            itemHeight: 6,
          },
          series: [
            {
              name: "已报到男女比例",
              type: "pie",
              radius: ["25%", "55%"],
              center: ["50%", "40%"],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: "outside",
                formatter: "{b}: {d}%",
                color: "#fff",
                fontSize: 8,
              },
              labelLine: {
                show: true,
                lineStyle: { color: "#fff" },
              },
              data: [
                {
                  value: maleRegistered,
                  name: "男",
                  itemStyle: { color: "#1E90FF" },
                },
                {
                  value: femaleRegistered,
                  name: "女",
                  itemStyle: { color: "#FF69B4" },
                },
              ],
            },
          ],
        };
        this.genderOptions = option;
      },

      // 更新已报到民族构成图表
      updateEthnicChart(ethnicData) {
        console.log("处理已报到民族数据:", ethnicData);

        // 如果没有民族数据或所有enrolledStudents都为0
        const hasRegisteredData = ethnicData.some(
          (item) => item.enrolledStudents > 0
        );

        if (!hasRegisteredData) {
          const option = {
            backgroundColor: "transparent",
            title: {
              text: "暂无报到数据",
              left: "center",
              top: "middle",
              textStyle: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 14,
              },
            },
            grid: {
              left: "8%",
              right: "4%",
              bottom: "15%",
              top: "25%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: [],
              axisLine: { lineStyle: { color: "#fff" } },
              axisLabel: { color: "#fff", fontSize: 8 },
            },
            yAxis: {
              type: "value",
              axisLine: { lineStyle: { color: "#fff" } },
              axisLabel: { color: "#fff", fontSize: 8 },
              splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
            },
            series: [],
          };
          this.ethnicOptions = option;
          return;
        }

        // 只显示已报到人数大于0的民族
        const validEthnicData = ethnicData.filter(
          (item) =>
            item.ethnicGroupName &&
            item.ethnicGroupName.trim() !== "" &&
            item.enrolledStudents > 0
        );

        console.log("过滤后的已报到民族数据:", validEthnicData);

        const categories = validEthnicData.map((item) => item.ethnicGroupName);
        const values = validEthnicData.map((item) => item.enrolledStudents);

        console.log("已报到民族图表数据 - 类别:", categories, "人数:", values);

        const option = {
          backgroundColor: "transparent",
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
            backgroundColor: "rgba(0,0,0,0.8)",
            borderColor: "rgba(147, 235, 248, .8)",
            textStyle: { color: "#FFF" },
            formatter: function (params) {
              if (params && params.length > 0) {
                const index = params[0].dataIndex;
                const item = validEthnicData[index];
                const percent =
                  item.totalStudents > 0
                    ? (
                        (item.enrolledStudents / item.totalStudents) *
                        100
                      ).toFixed(1)
                    : 0;
                return (
                  params[0].axisValue +
                  "<br/>" +
                  "已报到: " +
                  item.enrolledStudents +
                  "人<br/>" +
                  "总数: " +
                  item.totalStudents +
                  "人<br/>" +
                  "报到率: " +
                  percent +
                  "%"
                );
              }
              return "";
            },
          },
          grid: {
            left: "8%",
            right: "4%",
            bottom: "15%",
            top: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: categories,
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              color: "#fff",
              fontSize: 8,
              rotate: 30,
              interval: 0,
            },
          },
          yAxis: {
            type: "value",
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              color: "#fff",
              fontSize: 8,
              formatter: "{value}人",
            },
            splitLine: {
              lineStyle: { color: "rgba(255,255,255,0.1)" },
            },
          },
          series: [
            {
              name: "已报到人数",
              type: "bar",
              data: values,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00f7f6" },
                  { offset: 1, color: "#0072ff" },
                ]),
              },
              barWidth: "50%",
            },
          ],
        };
        this.ethnicOptions = option;
      },

      // 更新校区报到情况图表
      updateHighScoreChart(campusData) {
        console.log("处理校区报到数据:", campusData);

        const campusNames = campusData.map((item) => item.campus);
        const campusTotalCounts = campusData.map((item) => item.total);
        const campusRegisteredCounts = campusData.map((item) => item.enrolled);

        console.log("校区数据 - 名称:", campusNames);
        console.log("校区总数:", campusTotalCounts);
        console.log("校区已报到:", campusRegisteredCounts);

        const option = {
          backgroundColor: "transparent",
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
            backgroundColor: "rgba(0,0,0,0.8)",
            borderColor: "rgba(147, 235, 248, .8)",
            textStyle: { color: "#FFF" },
            formatter: function (params) {
              if (params && params.length > 0) {
                let result = params[0].name + "<br/>";
                const index = params[0].dataIndex;
                const item = campusData[index];
                const rate =
                  item.total > 0
                    ? ((item.enrolled / item.total) * 100).toFixed(1)
                    : 0;

                params.forEach((item) => {
                  const color = item.color;
                  result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${color}"></span>`;
                  result += `${item.seriesName}: ${item.value}人<br/>`;
                });
                result += `报到率: ${rate}%`;
                return result;
              }
              return "";
            },
          },
          legend: {
            data: ["已报到", "总数"],
            textStyle: { color: "#fff", fontSize: 9 },
            top: "5%",
            itemWidth: 10,
            itemHeight: 6,
            itemGap: 15,
          },
          grid: {
            left: "8%",
            right: "4%",
            bottom: "10%",
            top: "25%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: campusNames,
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              color: "#fff",
              fontSize: 9,
            },
          },
          yAxis: {
            type: "value",
            axisLine: { lineStyle: { color: "#fff" } },
            axisLabel: {
              color: "#fff",
              fontSize: 8,
              formatter: "{value}",
            },
            splitLine: {
              lineStyle: { color: "rgba(255,255,255,0.1)" },
            },
          },
          series: [
            // 第一个系列：已报到
            {
              name: "已报到",
              type: "bar",
              data: campusRegisteredCounts,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00f7f6" },
                  { offset: 1, color: "#0072ff" },
                ]),
              },
              barWidth: "35%",
              barGap: "10%",
            },
            // 第二个系列：总数
            {
              name: "总数",
              type: "bar",
              data: campusTotalCounts,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFB366" },
                  { offset: 1, color: "#FF8C42" },
                ]),
              },
              barWidth: "35%",
            },
          ],
        };
        this.highScoreOptions = option;
      },

      // 初始化默认图表数据
      initGenderChart() {
        // 如果有报到数据则不使用默认值
        if (
          this.reportedStudentsData &&
          this.reportedStudentsData.genderStats &&
          typeof this.reportedStudentsData.genderStats === "object"
        ) {
          return;
        }
        this.updateGenderChart(0, 0);
      },

      initEthnicChart() {
        // 如果有报到数据则不使用默认值
        if (
          this.reportedStudentsData &&
          this.reportedStudentsData.ethnicGroupStats &&
          typeof this.reportedStudentsData.ethnicGroupStats === "object"
        ) {
          return;
        }

        const defaultEthnicData = [
          { ethnicGroupName: "汉族", enrolledStudents: 0, totalStudents: 4852 },
          { ethnicGroupName: "回族", enrolledStudents: 0, totalStudents: 62 },
          {
            ethnicGroupName: "维吾尔族",
            enrolledStudents: 0,
            totalStudents: 41,
          },
          { ethnicGroupName: "满族", enrolledStudents: 0, totalStudents: 33 },
          { ethnicGroupName: "壮族", enrolledStudents: 0, totalStudents: 24 },
          { ethnicGroupName: "土家族", enrolledStudents: 0, totalStudents: 22 },
        ];
        this.updateEthnicChart(defaultEthnicData);
      },

      initHighScoreChart() {
        // 如果有报到数据则不使用默认值
        if (
          this.reportedStudentsData &&
          this.reportedStudentsData.campusStats &&
          typeof this.reportedStudentsData.campusStats === "object"
        ) {
          return;
        }

        // 使用默认数据
        const defaultCampusData = [
          { campus: "雁塔校区", enrolled: 0, total: 298 },
          { campus: "草堂校区", enrolled: 0, total: 4827 },
        ];
        this.updateHighScoreChart(defaultCampusData);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .centermap {
    .mapwrap {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      position: relative;

      .content-container {
        display: flex;
        height: 100%;
        gap: 15px;
        padding: 10px;
      }

      .map-container {
        flex: 2;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;

        // 地图标题样式
        .map-title {
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          flex-shrink: 0;

          .titletext {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: 2px;
            background: linear-gradient(
              92deg,
              #0072ff 0%,
              #00eaff 48.8525390625%,
              #01aaff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0 10px;
          }

          .zuo,
          .you {
            background-size: 100% 100%;
            width: 20px;
            height: 14px;
          }

          .zuo {
            background: url("../../assets/img/xiezuo.png") no-repeat;
          }

          .you {
            background: url("../../assets/img/xieyou.png") no-repeat;
          }
        }

        // 地图内容区域
        .map-content {
          flex: 1;
          height: 100%;
          position: relative;
        }
      }

      .charts-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;

        .chart-item {
          flex: 1;
          // background: rgba(0, 20, 40, 0.6);
          // border: 1px solid rgba(147, 235, 248, 0.2);
          // border-radius: 6px;
          padding: 8px;
          position: relative;
          min-height: 0;

          .chart-title {
            text-align: center;
            color: #00f7f6;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-shadow: 0 0 4px rgba(0, 247, 246, 0.5);
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 6px;
            padding: 1px;
            background: linear-gradient(
              45deg,
              rgba(0, 247, 246, 0.2) 0%,
              rgba(0, 114, 255, 0.2) 50%,
              rgba(0, 247, 246, 0.2) 100%
            );
            mask: linear-gradient(#fff 0 0) content-box,
              linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask: linear-gradient(#fff 0 0) content-box,
              linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            pointer-events: none;
          }
        }
      }
    }
  }
</style>
